<!-- 产品碳足迹-碳足迹报告 -->

<template>
  <div>
    <div class="m_contentBox">
      <a-card :bordered="false">
        <div class="m_aCardBox">
          <div class="tabBox">
            <div class="table-page-search-wrapper">
              <a-form
                :model="queryParam"
                layout="inline"
                @keyup.enter.native="searchQuery"
              >
                <a-row :gutter="24">
                  <a-col :span="6">
                    <a-form-model-item
                      :label="$t('message.Name_of_technological_process')"
                    >
                      <j-input
                        v-model="queryParam.processName"
                        allowClear
                        :placeholder="$t('message.Please_enter')"
                      ></j-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="6"> </a-col>
                  <a-col :span="6"> </a-col>
                  <a-col :span="6">
                    <a-form-model-item label="" style="">
                      <div
                        style="
                          width: 100%;
                          display: flex;
                          justify-content: flex-end;
                        "
                      >
                        <a-button type="primary" @click="searchQuery">{{
                          $t("message.Search")
                        }}</a-button>
                        <a-button
                          style="margin-left: 8px"
                          @click="searchReset"
                          >{{ $t("message.Reset") }}</a-button
                        >
                      </div>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </div>

          <!-- 表格 -->
          <div class="cardBox">
            <div class="butons" @click="onDRawer">
              <img class="img3" src="@/assets/cptzj/img3.png" alt="" />
              <div class="twsr">
                {{ $t("message.New_technological_process") }}
              </div>
            </div>
            <div class="m_mt24">
              <a-table
                ref="table"
                :columns="columns"
                :dataSource="dataSource"
                :loading="loading"
                :pagination="ipagination"
                :bordered="false"
                class=""
                rowKey="id"
                size="middle"
                @change="handleTableChange"
              >
                <div slot="serialNumber" slot-scope="text, record, index">
                  {{ index + 1 }}
                </div>
                <div
                  class="m_cbFlex"
                  style="padding: 0 5px"
                  slot="action"
                  slot-scope="text, record"
                >
                  <a @click="onEdit(record)">{{ $t("message.Edit") }}</a>

                  <a @click="onCopy(record)">{{ $t("message.Copy") }}</a>
                  <a-popconfirm
                    :title="$t('message.Confirm_delete')"
                    :cancelText="$t('message.Cancel')"
                    :okText="$t('message.Confirm')"
                    @confirm="() => onDelete(record)"
                  >
                    <a>{{ $t("message.Delete") }}</a>
                  </a-popconfirm>
                </div>
              </a-table>
            </div>
          </div>
        </div>
      </a-card>
    </div>

    <section class="m_popupBox" v-if="isAss">
      <footprintProductForm ref="footprintProductForm" @back="back" />
    </section>
    <!-- 删除弹框 -->
    <!-- <a-modal
        :title="$t('message.Tip')"
        :visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <p>{{$t("message.Is_it_confirmed_to_delete_this_emission_source_After_deletion_it_cannot_be_recovered_This_operation_does_not_affect_the_previously_referenced_models")  }}</p>
      </a-modal> -->
  </div>
</template>
    
<script>
import footprintProductForm from "./footprintProductForm.vue";
import { cloneObject } from "@/utils/util";
import { deleteAction, getAction, postAction } from "@/api/manage";
export default {
  name: "ProcessFlowLibrary",
  components: {
    footprintProductForm,
  },
  data() {
    return {
      loading: false,
      queryParam: {},
      columns: [
        {
          title: this.$t("message.Serial_number"),
          align: "center",
          dataIndex: "productName",
          scopedSlots: { customRender: "serialNumber" },
          width: 150,
        },
        {
          title: this.$t("message.Name_of_technological_process"),
          align: "center",
          dataIndex: "processName",
          width: 150,
        },
        {
          title: this.$t("message.Update_person"),
          align: "center",
          dataIndex: "updateBy_dictText",
          width: 150,
        },
        {
          title: this.$t("message.Update_date"),
          align: "center",
          dataIndex: "updateTime",
          width: 150,
        },
        {
          title: this.$t("message.Handle"),
          dataIndex: "action",
          align: "center",
          fixed: "right",
          width: 220,
          scopedSlots: { customRender: "action" },
        },
      ],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      dataSource: [], // 数据
      disabled: false,
      visible: false,
      isAss: false,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    back() {
      this.isAss = false;
      this.getData();
    },
    onClose() {},
    /**
     * 复制
     */
    onCopy(e){
      console.log(e)
      this.isAss = true;
      setTimeout(() => {
        this.$refs.footprintProductForm.onType(1)
        this.$refs.footprintProductForm.CopyIasss=true
        this.$refs.footprintProductForm.onChangeStep(1,e.id);
      }, 100);
    },
    /**
     * 新建
     */
    onDRawer() {
      this.isAss = true;
      setTimeout(() => {
        this.$refs.footprintProductForm.onType(1)
        this.$refs.footprintProductForm.onChangeStep(1);
      }, 100);
    },
    /**
     * 下拉框数据过滤
     */
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    /**
     * 编辑
     */
    onEdit(e){
      this.isAss = true;
      setTimeout(() => {
      this.$refs.footprintProductForm.onChangeStep(1,e.id,2)
      this.$refs.footprintProductForm.onType(2)
    }, 100);

    },
    /**
     * 删除碳足迹报告
     */
    handleCancel(e) {
      this.visible = false;
    },
    /**
     * 删除碳足迹报告
     */
    handleOk() {},
    /**
     * 删除碳足迹报告
     */
    onDelete(item) {
      deleteAction("/CyWorkmanshipLibrary/cyWorkmanshipLibrary/delete", {
        id: item.id,
      }).then((res) => {
        if (res.success) {
          this.$message.success(this.$t('message.delete_success'))
          this.getData()
        }else{
          this.$message.error(this.$t('message.delete_error'))
        }
      });
    },
    /**
     * 查询
     */
    searchQuery() {
      console.log("searchQuery");
      this.ipagination.current = 1;
      this.getData();
    },
    /**
     * 重置
     */
    searchReset() {
      console.log("searchReset");
      this.queryParam = {};
      this.ipagination.current = 1;
      this.getData();
    },
    handleTableChange(pagination) {
      console.log(pagination);
      this.ipagination = pagination;
      this.getData();
    },
    getData() {
      let reqData = cloneObject(this.queryParam);
      reqData.pageNo = this.ipagination.current;
      reqData.pageSize = this.ipagination.pageSize;
      getAction(
        "/CyWorkmanshipLibrary/cyWorkmanshipLibrary/list",
        reqData
      ).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records || [];
          this.ipagination.total = res.result.total;
        }
      });
    },
  },
};
</script>
    
    <style lang="less" scoped>
.drawerOptionBox {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
  z-index: 1;
}
.butons {
  background: #148958;
  border-radius: 3px 3px 3px 3px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
}
.twsr {
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}
.img3 {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
/deep/ .ant-card-body {
  background: #f5f8f7;
}

.tabBox {
  padding: 24px 24px 0;
  background: #ffffff;
  border-radius: 3px;
}

.cardBox {
  margin-top: 24px;
  padding: 24px;
  background: #ffffff;
  border-radius: 3px;
}
</style>
    